<template>
  <div>
    <div class="history" v-if="show">
      <div class="title">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="del" />
      </div>
      <div class="content">
        <van-tag
          @click="showList(item)"
          plain
          v-for="item in historyKeywordList"
          :key="item"
        >{{item}}</van-tag>
      </div>
    </div>

    <div class="history">
      <div class="title">
        <h4>热门搜索</h4>
      </div>
      <div class="content">
        <van-tag
          @click="showList(item.keyword)"
          plain
          v-for="item in hotKeywordList"
          :type="item.is_hot==1?'danger':'default'"
          :key="item.keyword"
        >{{item.keyword}}</van-tag>
      </div>
    </div>
  </div>
</template>
 
<script>
import { GetSearch, GetGoodList, clear } from "@/request/api";
export default {
  data() {
    return {
      historyKeywordList: [],
      hotKeywordList: [],
      show: true,
    };
  },
  created() {
    GetSearch().then((res) => {
      this.historyKeywordList = res.data.historyKeywordList;
      this.hotKeywordList = res.data.hotKeywordList;
      this.$emit("keyword", res.data.defaultKeyword.keyword);
    });
  },
  methods: {
    del() {
      clear().then((res) => {
        if (res.errno == 0) {
          this.show = false;
          this.$toast.success("删除成功");
        }
      });
    },
    showList(msg) {
      GetGoodList({ keyword: msg }).then((res) => {
        this.$store.commit("Search", res.data.goodsList);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.history {
  margin-bottom: 20px;
  background: #fff;
  padding: 10px 20px;
  .title {
    height: 40px;
    line-height: 40;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    h4 {
      font-size: 20px;
    }
    .van-icon {
      font-size: 20px;
    }
  }
  .van-tag {
    font-size: 14px;
    margin-left: 5px;
    margin-bottom: 5px;
  }
}
</style>